<template>
	<view class="component">
		<!-- <view class="title" style="height: 70rpx!important;padding-top: 30rpx;">
      <view class="label">促销活动<text style="font-size: 26rpx;">({{ dataSource.length || 0 }})</text></view>
      <view class="more">
      </view>
    </view> -->
		<view class="content" style="padding-bottom: 0;">
			<view class="list" v-if="item.timeStr!=='活动已结束'" v-for="(item, index) of dataSourceList" :key="index">
				<view class="title" style="height: 60rpx!important;">
					<view class="label">{{ item.title }}</view>
					<view class="more">
						<!-- <uni-icons type="forward" size="20"></uni-icons> -->
					</view>
				</view>
				<view class="content" :key="index">
					<view class="poster">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
					<view class="tips">
						<view class="label">活动倒计时： </view>
						<view class="value">{{ item.timeStr }}</view>
					</view>
				</view>
			</view>
			<view v-if="dataSourceList.every(i => {						
						return i.timeStr === '活动已结束'
					})" class="" style="margin-top: 80rpx;">

			</view>
			<StEmpty v-if="dataSourceList.every(i => {						
						return i.timeStr === '活动已结束'
					})">暂无促销活动</StEmpty>
		</view>
	</view>
</template>
<script>
	import StEmpty from '@/components/st-empty/st-empty.vue';
	export default {
		components: {
			StEmpty
		},
		props: {
			dataSource: {
				type: Array,
				default: () => []
			},
			isEmpty: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isSalesProNull: false,
				dataSourceList: JSON.parse(JSON.stringify(this.dataSource)),
			}
		},
		computed: {

		},
		watch: {

		},
		mounted() {
			this.renderData();
			this.timer = setInterval(() => {
				this.renderData();
			}, 1000);
		},
		destroyed() {
			clearInterval(this.timer)
		},
		methods: {
			renderData() {
				let updatedList = JSON.parse(JSON.stringify(this.dataSourceList)) // 使用深拷贝后的数据进行操作

				updatedList.forEach((item, index) => {
					let countDown = this.countDown(item.endtime);
					if (countDown.day <= '00' && countDown.hour <= '00' && countDown.minute <= '00' && countDown
						.second <= '00') {
						item.timeStr = '活动已结束';
						return;
					}
					let timeStr = `${countDown.day}天 ${countDown.hour}:${countDown.minute}:${countDown.second}`;
					item.timeStr = timeStr;
				});
				this.dataSourceList = updatedList;
			},

			// 根据时间戳倒计时
			countDown(time) {
				let now = new Date().getTime();
				let diff = time * 1000 - now;
				let day = Math.floor(diff / (24 * 60 * 60 * 1000));
				let hour = Math.floor((diff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
				let minute = Math.floor((diff % (60 * 60 * 1000)) / (60 * 1000));
				let second = Math.floor((diff % (60 * 1000)) / 1000);
				return {
					day: day < 10 ? '0' + day : day,
					hour: hour < 10 ? '0' + hour : hour,
					minute: minute < 10 ? '0' + minute : minute,
					second: second < 10 ? '0' + second : second,
				}
			}
		}
	};
</script>
<style lang='less' scoped>
	.component {
		width: 100%;
		height: 100%;
		background-color: #fff;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			height: 90rpx;

			.label {
				font-size: 32rpx;
				color: #333;
				/* font-weight: 600; */
				font-size: 15px;
				line-height: 18px;
			}

			.more {
				font-size: 28rpx;
				color: #999;
			}
		}

		.content {
			padding: 0 32rpx 30rpx;

			.poster {
				width: 100%;
				height: 300rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 32rpx;
				}
			}

			.tips {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				padding: 24rpx 10rpx 0;
			}
		}
	}
</style>